<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
    enablePullDownRefresh: true,
  },
}
</route>
<template>
  <page-meta :root-font-size="setting.rootFontSize"></page-meta>
  <view class="bg-white overflow-hidden">
    <view class="tabbar">
      <wd-navbar :title="currentTenantName" :bordered="false">
        <template #right>
          <wd-icon name="scan" size="22px" color="white" @click="scanCode"></wd-icon>
        </template>
      </wd-navbar>
    </view>
    <view class="menu-container">
      <view
        class="menu-cell"
        v-for="item in menu.menuList"
        :key="item.id"
        v-show="item.children?.length"
      >
        <view class="group-name">{{ item.name }}</view>
        <view class="menu-list">
          <view
            class="item"
            v-for="cItem in item.children"
            :key="cItem.id"
            @click="toPage(cItem.path)"
          >
            <image class="icon" :src="cItem.meta.icon" mode="aspectFit"></image>
            <view class="name">
              <text class="text">{{ cItem.name }}</text>
            </view>
            <view v-if="cItem.badgeNum > 0" class="badge">
              {{ cItem.badgeNum >= 100 ? '99+' : cItem.badgeNum }}
            </view>
          </view>
          <view class="item empty" v-for="(item, index) in Array(10)" :key="'_' + index"></view>
        </view>
      </view>
    </view>
	<!-- <sse @receive="receiveMsg"></sse> -->
  </view>
</template>

<script lang="ts" setup>
// import { useDict } from '@/hooks/dict';
import { useSetting } from '@/stores/setting';
import { useMenu } from '@/stores/menu';
// import sse from '@/components/sse.vue';
import cache from '@/utils/cache';
// #ifdef APP-PLUS
import setBedge from '@/utils/set_badge';
// #endif

const menu = useMenu();
const setting = useSetting();

// const { dict_type } = useDict('dict_type');

onLoad(() => {
  // console.log(author);
  init();
});
onPullDownRefresh(() => {
  menu.getMenuList();
  // #ifdef APP-PLUS
  setBedge();
  // #endif
  // setTimeout(() => {
  //   uni.stopPullDownRefresh();
  // }, 500);
});
const currentTenantName = ref('');
const isClicking = ref(false);
const toPage = function (path: string) {
  if (isClicking.value) return;
  isClicking.value = true;
  uni.navigateTo({
    url: path,
    complete: () => {
      isClicking.value = false;
    },
  });
};
const init = function () {
  if (cache.get('tenantName')) {
    currentTenantName.value = cache.get('tenantName');
  }
};
onShow(() => {
  console.log(12321);
  // #ifdef APP-PLUS
  setBedge();
  // #endif
  menu.getMenuList();
});

const scanCode = () => {
  uni.navigateTo({
    url: '/pages/pm/requirement/scan-code',
  });
};

const receiveMsg = (msg)=>{
	console.log(msg,'msgggggggggg');
	
	plus.push.createMessage('msgggggggggg');

	
}
onMounted(()=>{
	plus.push.addEventListener(
		"click",
		function (msg) {
			console.log(msg.title,'-------');
		}
	)
})
</script>

<style lang="scss">
.tabbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(45deg, #0081ff, #1ab3f5);
  z-index: 100;
}
.menu-container {
  padding: 180rpx 32rpx 32rpx 0;

  .menu-cell {
    margin-bottom: 24rpx;

    .group-name {
      position: relative;
      padding-left: 48rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;

      &::after {
        position: absolute;
        top: 2rpx;
        bottom: 2rpx;
        left: 22rpx;
        width: 8rpx;
        content: '';
        background-color: #2e5cf6;

        // background-color: $uni-color-primary;
        border-radius: 3rpx;
      }
    }
  }
}

.menu-list {
  /* width: 728rpx; */
  display: flex;
  flex-wrap: wrap;
  /* justify-content: flex-start; */
  justify-content: space-around;
  margin: 0 auto 10rpx 16rpx;
  border-radius: 15rpx;

  .item {
    position: relative;
    box-sizing: border-box;
    width: 148rpx;
    max-width: 20%;
    margin: 10rpx;
    margin-bottom: 12rpx;
    /* border: 1rpx solid #f4f4f4; */
    font-size: 14rpx;
    text-align: center;
    background: #fff;
    border-radius: 15rpx;
    transition: all 0.3s;

    &.empty {
      height: 0;
      min-height: 0;
      padding: 0;
      margin-top: 0;
      margin-bottom: 0;
    }

    .icon {
      width: 100rpx;
      height: 100rpx;
      margin-top: 15rpx;
      background-color: #f3f3f3;
      border-radius: 8rpx;
    }

    .name {
      margin-top: 12rpx;
      font-size: 26rpx;
      word-break: break-all;
      /* text-align: left; */
    }

    .badge {
      position: absolute;
      top: 8rpx;
      right: 12rpx;
      box-sizing: border-box;
      min-width: 28rpx;
      height: 28rpx;
      padding: 0 6rpx;
      font-size: 22rpx;
      line-height: 28rpx;
      color: #fff;
      background-color: #f44000;
      border-radius: 14rpx;
    }
  }
}
</style>
